<template>
    <div class="content">
      <div class="shiftsTop">
        <div class="shiftsTitle">交班</div>
   
        <div class="shiftsJump">
          <div style="display: flex;background: none;border: none;justify-content: center;align-items: center;">
            <el-button type="primary"  class="close-status" style="background:#ccc;" @click="handleRoom" v-if="lockText == '关闭' ">开启小程序点单</el-button>
            <el-button type="primary"  class="close-status" @click="handleRoom" v-else>关闭小程序点单</el-button>
        </div>
          <div @click="navgatTo('/Summary')">查询当日营业汇总</div>
          <div @click="navgatTo('/shiftsRecord')">交班记录</div>
          <!-- shiftsRecord -->
        </div>
      </div>

      <div class="detailContent">
        <div class="detailBox">
          <div class="money">￥{{ shiftsData.reserveMoney }}</div>
          <div class="tip">
            <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgMix1.png">
            <div>本人备用金</div>
          </div>
        </div>
        <div class="detailBox">
          <div class="money">￥{{ shiftsData.cashAmt }}</div>
          <div class="tip">
            <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgMix2.png">
            <div>本班次现金收入</div>
          </div>
        </div>
        <div class="detailBox">
          <div class="money">￥{{ shiftsData.totalAmt }}</div>
          <div class="tip">
            <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgMix3.png">
            <div>本班次营业额</div>
          </div>
        </div>
      </div>

      <div class="Summary">
        <div class="SummaryLeft">
          <div class="SummaryMenu">
            <div class="MenuItem" v-for="(item,index) in MenuList" :key="index" :class="{ choseItem: index == activeItem }" @click="changeItem(index)">
              <span>{{ item }}</span>
              <div></div>
            </div>
          </div>

          <div v-if="activeItem == '0'">
            <div class="TableTitle">
              <div>收款方式</div>
              <div>收款总额</div>
              <div>实收总额</div>
            </div>

            <div class="TableList">
              <div class="TableItem" v-for="(item,index) in shiftsData.payTypeList" :key="index">
                <div>{{ item.payTypeName }}</div>
                <div>￥{{ item.payAmt }}</div>
                <div>￥{{ item.realAmt }}</div>
              </div>
            </div>
            <div class="TableTotal" v-if="shiftsData.payTypeSummary">
              <div>收款合计：￥{{ shiftsData.payTypeSummary.payAmtSummary }}</div>
              <div>实收合计：<span>￥{{ shiftsData.payTypeSummary.realAmtSummary }}</span></div>
            </div>
          </div>

          <div v-if="activeItem == '1'">
            <div class="TableTitle TableTitle2">
              <div>现金消费</div>
              <div>会员卡现金充值</div>
              <div>营业外收入</div>
              <div>挂账还款</div>
            </div>

            <div class="TableList TableList2">
              <div class="TableItem">
                <div>￥{{ shiftsData.cashDetail.cashConsumeAmt }}</div>
                <div>￥{{ shiftsData.cashDetail.memberCardRecharge }}</div>
                <div>￥{{ shiftsData.cashDetail.businessOutIncome }}</div>
                <div>￥{{ shiftsData.cashDetail.cashRefundAmt }}</div>
              </div>
            </div>
            <div class="TableTotal">
              <div>现金明细汇总：<span>￥{{ shiftsData.cashDetail.cashSummary }}</span></div>
            </div>
          </div>

          <div v-if="activeItem == '2'">
            <div class="TableTitle TableTitle2">
              <div>会员优惠</div>
              <div>折扣优惠</div>
              <div>团购券优惠</div>
              <div>抹零</div>
              <div>赠送优惠</div>
            </div>
            <div class="TableList TableList2">
              <div class="TableItem">
                <div>{{ shiftsData.discountDetail.memberCardDiscount }}</div>
                <div>{{ shiftsData.discountDetail.orgDiscount }}</div>
                <div>{{ shiftsData.discountDetail.mtdyDisAmt  }}</div>
                <div>{{ shiftsData.discountDetail.smallChange }}</div>
                <div>{{ shiftsData.discountDetail.giftAmt }}</div>
              </div>
            </div>
            <div class="TableTotal">
              <div>优惠明细合计：<span>￥{{ shiftsData.discountDetail.discountSummary }}</span></div>
            </div>
          </div>
        </div>
        <div class="SummaryRight">
          <div class="shiftData" v-if="shiftsData.shiftsInfo">
            <div>交班人：{{ shiftsData.shiftsInfo.shiftsUser }}</div>
            <div class="datePicker">
              <div>交接班时间：<span>{{ shiftsData.shiftsInfo.shiftsBeginTime }}</span> 至 </div>
              <div style="padding: 0 10px;" v-if="!isQueryDb">{{ beijingTime }}</div>
              <div style="padding: 0 10px;" v-if="isQueryDb">{{ shiftsData.shiftsInfo.shiftsEndTime }}</div>
            </div>
            <div class="shiftTop">
              <div @click="shiftTopS = '0'" :class="shiftTopS == '0'?'shiftTopS':''">
                <span>本班次数据</span>
                <div></div>
              </div>
              <div @click="shiftTopS = '1'" :class="shiftTopS == '1'?'shiftTopS':''" v-if="shiftsData.todayInfo">
                <span>当前营业日累计数据</span>
                <div></div>
              </div>
            </div>
            <div class="shiftDataInfo" v-if="shiftTopS == '0'">
              <div>开台数：{{ shiftsData.shiftsInfo.shiftsRoomCount }}次</div>
              <div>到店人数：{{ shiftsData.shiftsInfo.shiftsPeoperCount }}人</div>
              <div>营业额：￥{{ shiftsData.shiftsInfo.shiftsTotalAmt }}</div>
              <div>会员充值金额：￥{{ shiftsData.shiftsInfo.shiftsRechargeAmt }}</div>
              <!-- <div>本班营业外收入：￥0.00</div> -->
              <div>权益卡：￥{{ shiftsData.shiftsInfo.upVipAmt }}</div>
              <div>挂账还款：￥{{ shiftsData.shiftsInfo.shiftsMountAmt }}</div>
            </div>

            <div class="shiftDataInfo" v-if="shiftTopS == '1' && shiftsData.todayInfo">
              <div>开台数：{{ shiftsData.todayInfo.openRoomCount }}次</div>
              <div>到店人数：{{ shiftsData.todayInfo.arrivePeoperCount }}人</div>
              <div>营业额：￥{{ shiftsData.todayInfo.totalAmt }}</div>
              <div>会员充值金额：￥{{ shiftsData.todayInfo.rechargeAmt }}</div>
              <!-- <div>本班营业外收入：￥0.00</div> -->
              <div>权益卡：￥{{ shiftsData.todayInfo.upVipAmt }}</div>
              <div>挂账还款：￥{{ shiftsData.todayInfo.mountAmt }}</div>
            </div>

            <div class="shiftRemark">
              <div>交班备注：</div>
              <input type="text" v-model="remarkText">
            </div>
          </div>

          <div class="shiftBottom">
            <div @click="digitaShow = true" v-if="!isQueryDb">录入备用金</div>
            <div @click="OpShifts()" v-if="!isQueryDb">一键交班</div>
            <div @click="backToday()" v-if="isQueryDb" style="width: 100%;">返回本班交班汇总</div>
          </div>
        </div>
      </div>

      <el-dialog
        v-model="digitaShow"
        width="25%"
        destroy-on-close
        :show-close="false"
        center
        class="menuDialog"
        >
        <div class="digitalPanel">
            <div class="title">请输入备用金</div>
            <el-input v-model="tempNum" @input="oninput()"></el-input>
            <div class="digitalNum">
                <div class="numBtn" @click="oninput('1')">1</div>
                <div class="numBtn" @click="oninput('2')">2</div>
                <div class="numBtn" @click="oninput('3')">3</div>
                <div class="numBtn" @click="delinput(tempNum)"><img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/del.png" style="width: 40px; height: auto;"></div>
                <div class="numBtn" @click="oninput('4')">4</div>
                <div class="numBtn" @click="oninput('5')">5</div>
                <div class="numBtn" @click="oninput('6')">6</div>
                <div class="numBtn" @click="removeinput()">删除</div>
                <div class="numBtn" @click="oninput('7')">7</div>
                <div class="numBtn" @click="oninput('8')">8</div>
                <div class="numBtn" @click="oninput('9')">9</div>
                <div class="numBtn" @click="oninput('0')">0</div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="digitaShow = false">取 消</el-button>
            <el-button style="background-color: #FF6A00;color: #fff;" @click="subNum()"
                >确 定</el-button
            >
            </span>
        </template>
        </el-dialog>
    <!-- 交班弹窗 -->
  <el-dialog    width="25%" v-model="dialogVisible">
    <div style="font-size: 24px;color: #212121;font-weight: bold;text-align: center;margin-top: 20px;">确认交班？</div>
    <span slot="footer" class="dialog-footer dialog-footer-close">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button  class="submit"  @click="confirmAction">确 定</el-button>
    </span>
  </el-dialog>
    </div>
    <div class="diglog-ontainer-open">
        <el-dialog v-model="diglogvisible" title="提示" center :show-close="false" :before-close="handleCancel">
            <div class="content-box" v-if="lockText == '关闭' ">
                请确认<text style="color: #ff6e0e;">开启</text>操作？
            </div>
            <div class="content-box" v-else>
                请确认<text style="color: #ff6e0e;">关闭</text>操作？
            </div>
            <div class="footer-box">
                <el-button class="cancel" @click="diglogvisible = false">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
  import Api from '@/api'
  import { getLocalIPv4 } from "@/utils/getip.js";
  import useConfigStore from '@/store/config'
  const configStore = useConfigStore()
  const shopInfo = useConfigStore().shopInfo

  const route = useRoute()
  const router = useRouter()
  const dialogVisible = ref(false)
  const digitaShow = ref(false)
  const shiftTopS = ref('0')
  const MenuList = ['收款方式汇总','现金收款明细','优惠明细汇总']
  const activeItem = ref('0')
  const changeItem = (index) => {
    activeItem.value = index
  }
  const beijingTime = ref('正在获取当前时间...')
  const getNowDate = () => {
    setInterval(()=>{
      let stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
      beijingTime.value = new Date(stamp).toISOString().replace(/T/,' ').replace(/\..+/, '').substring(0,19);
    },1000)
    return
    let stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    beijingTime.value = new Date(stamp).toISOString().replace(/T/,' ').replace(/\..+/, '').substring(0,19);
  }

  //获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

  //交班汇总
  const shiftsData = ref('')
  const ShiftsSummary = () => {
    Api.Common.PcObjProcess.Do({"functionName":"ShiftsSummary",contentData:{}})
    .then(res=>{
      console.log(res)
      shiftsData.value = res
    })
  }

  //交班备注
  const remarkText = ref('')
  //交班操作
  const OpShifts = () => {
    dialogVisible.value = true
  }
  const confirmAction = ()=> {
    Api.Common.PcObjProcess.Do({functionName:"OpShifts",contentData:{reserveMoney:shiftsData.value.reserveMoney,shiftsRemark:remarkText.value,endTime: beijingTime.value,ip:ip.value}})
    .then(res=>{
      console.log(res) 
      // alert(res.result)
      ElNotification({
            title: '提示',
            message: res.result,
            type: 'success',
        })
        dialogVisible.value = false
      ShiftsSummary()
    })
  }
  const backToday = () => {
    router.push({
      path: '/shiftsDuty',
    })
    isQueryDb.value = false
    ShiftsSummary()
  }


  //录入备用金
  const tempNum = ref('')
  const oninput = (n) => {
    if (tempNum.value.toString().length < 4) {
        tempNum.value += n
    } else {
        alert('数值不能超出4位数')
    }
  }
  const delinput = (n) => {
    tempNum.value = n.slice(0, n.length - 1)
  }
  const removeinput = (n) => {
      tempNum.value = ''
  }
  const subNum = () => {
    if(tempNum.value && tempNum.value > 0){
      digitaShow.value = false
      shiftsData.value.reserveMoney = tempNum.value
    }else{
      alert('请填写有效金额')
    }
  }

  const navgatTo = (url) => {
    router.push({
        path: url,
        // query: {
        //   startTime: shiftsData.value.shiftsInfo.shiftsBeginTime
        // }
    })
  }
  // ------------------------------------------------ 初始化 --------------------------------------------------------
  const isQueryDb = ref(false)
  const onInit = async () =>{
    getNowDate()
    if(route.query.ShiftsDetail == undefined){
      ShiftsSummary()
    }else{
      isQueryDb.value = true
      shiftsData.value = JSON.parse(route.query.ShiftsDetail)
      console.log(shiftsData.value)
    }
  }
  onInit()
  
  const getUserMenuButton = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetUserMenuButton", "contentData": { obj:"" }})
        .then(res => {
            console.log(res.result);
            //交班权限
            let btnConJB = res.result.some(p => p.name == "cashier-handover")
            if(!btnConJB){
              router.back()
            }
           
        })
}
getUserMenuButton();

// ------------------------------------------------------------关闭小程序点单-----------------------------------------------------------------
const diglogvisible  = ref(false)
const lockText = ref('')

console.log(shopInfo.IsCloseMiniOrder,'shopInfo.isCloseMiniOrder')
if(shopInfo.IsCloseMiniOrder == true) {
    lockText.value = '关闭'
} else {
    lockText.value = '开启'
}

const handleRoom  = () => { 
       diglogvisible.value = true     
}
const handleSubmit = ()=> {
    Api.Common.PcObjProcess.Do({ "functionName": "MiniH5OrderOpen", "contentData": {"state":lockText.value ==='开启' ? 0 : 1} })
    .then(res => {
      ElNotification({
        title: '提示',
        message: '操作成功',
        type: 'success',
      })
      diglogvisible.value = false
      if(lockText.value == '开启') {
        lockText.value = '关闭'
    } else {
        lockText.value = '开启'
    }
    })
}
</script>

<style scoped lang="scss">
  *{
    color: #212121;
  }
  .content{
    width: 95%;
  }
  .shiftsTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shiftsTitle{
      font-size: 24px;
      font-weight: bold;
    }
    .shiftsJump{
      display: flex;
      align-items: center;
      div{
        cursor: pointer;
        background-color: #FFFFFF;
        border: 1px solid #E6E6E6;
        width: 250px;
        margin-left: 40px;
        text-align: center;
        font-size: 17px;
        padding: 20px 0;
        border-radius: 10px;
      }
    }
  }

  .detailContent{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    .detailBox:nth-child(1){
      background-image: url(https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgBox1.png);
    }
    .detailBox:nth-child(2){
      background-image: url(https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgBox2.png);
    }
    .detailBox:nth-child(3){
      background-image: url(https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/shiftsDuty/bgBox3.png);
    }
    .detailBox{
      background-size: 100% 100%;
      width: 31.5%;
      height: 160px;
      box-sizing: border-box;
      padding: 30px;
      .money{
        font-size: 27px;
        color: #fff;
        margin-bottom: 30px;
      }
      .tip{
        display: flex;
        align-items: center;
        img{
          width: 46px;
          height: auto;
          margin-right: 20px;
        }
        div{
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }

  .Summary{
    display: flex;
    justify-content: space-between;
    .SummaryLeft{
      width: 60%;
      height: 550px;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      .SummaryMenu{
        display: flex;
        align-items: center;
        .MenuItem{
          width: 33.333%;
          font-size: 16px;
          text-align: center;
          padding: 15px 0;
          cursor: pointer;
          div{
            width: 25px;
            height: 2px;
            margin: auto;
            margin-top: 10px;
          }
        }
        .choseItem{
          span{
            color: #FF6A00;
          }
          div{
            background-color: #FF6A00;
          }
        }
      }
      .TableTitle{
        display: flex;
        align-items: center;
        background-color: #F9F9F9;
        div{
          text-align: center;
          width: 33.333%;
          padding: 15px 0;
          font-size: 16px;
          color: #666666;
        }
      }
      .TableTitle2{
        div{
          width: 25%;
        }
      }
      .TableTitle3{
        div{
          width: 16.666%;
        }
      }
      .TableList{
        height: 380px;
        overflow: auto;
        .TableItem{
          display: flex;
          align-items: center;
          div{
            text-align: center;
            width: 33.333%;
            padding: 15px 0;
            font-size: 16px;
          }
        }
      }
      .TableList2{
        .TableItem{
          div{
            width: 25%;
          }
        }
      }
      .TableList3{
        .TableItem{
          div{
            width: 16.666%;
          }
        }
      }
      .TableTotal{
        border-top: 1px solid #F2F2F2;
        margin: 0 30px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: end;
        div{
          padding: 0 35px;
          font-size: 20px;
          font-weight: bold;
        }
        span{
          color: #FF3333;
        }
      }
      
    }

    .SummaryRight{
      width: 38.8%;
      height: 550px;
      .shiftData{
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
        height: 470px;
        box-sizing: border-box;
        padding: 15px 40px;
        font-size: 16px;
        .datePicker{
          display: flex;
          align-items: center;
          ::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper){
            height: 40px;
          }
          ::v-deep(.el-input__wrapper){
            margin-left: 10px;
            box-shadow: 0 0 0 1px transparent inset;
            background-color: #FAFAFA;
            font-size: 16px;
            border-radius: 10px;
          }
          ::v-deep(.el-input__inner){
            color: #212121;
          }
          ::v-deep(.el-input__wrapper:hover){
              box-shadow: 0 0 0 1px transparent inset;
          }
        }
        .shiftTop{
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #FAFAFA;
          margin-top: 20px;
          >div{
            width: 50%;
            text-align: center;
            padding-top: 14px;
            padding-bottom: 5px;
            cursor: pointer;
            >div{
              width: 25px;
              height: 2px;
              margin: auto;
              margin-top: 8px;
            }
          }
        }
        .shiftTopS{
          span{
            color: #FF6A00;
          }
          div{
            background-color: #FF6A00;
          }
        }

        .shiftDataInfo{
          margin-left: 50px;
          line-height: 2;
          margin-top: 10px;
        }
        .shiftRemark{
          margin-left: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 15px;
          input{
            width: 365px;
            height: 60px;
            border-radius: 10px;
            font-size: 16px;
            box-sizing: border-box;
            padding: 0 20px;
            background-color: #F2F2F2;
          }
        }
      }
      .shiftBottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        div{
          width: 45%;
          text-align: center;
          padding: 18px 0;
          background-color: #FFD400;
          border-radius: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .btnDisable{
          background-color: #999;
          pointer-events: none;
          cursor: not-allowed;
        }
      }
      
    }
  }

  ::v-deep(.menuDialog){
    border-radius: 10px;
    .el-dialog__header{
      padding: 0;
    }
  }
  .digitalPanel{
        box-sizing: border-box;
        padding: 30px 20px;
        padding-bottom: 0;
        ::v-deep(.el-input__wrapper){
            box-shadow: 0 0 0 1px transparent inset;
            background-color: #FAFAFA;
            font-size: 16px;
            border-radius: 10px;
          }
          ::v-deep(.el-input__inner){
            color: #212121;
          }
          ::v-deep(.el-input__wrapper:hover){
              box-shadow: 0 0 0 1px transparent inset;
          }
        ::v-deep(.el-input){
            height: 50px;
            margin-bottom: 30px;
            .el-input__wrapper{
                background-color: #F9F9F9;
                font-size: 18px;
            }
            
        }
        .title{
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .digitalNum{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .numBtn{
                width: 90px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #212121;
                font-size: 22px;
                background-color: #E6E6E6;
                margin-bottom: 20px;
                border-radius: 10px;
                cursor: pointer;
            }
            .numBtn:hover{
                background-color: #FF6A00;
                color: #fff;
            }
        }

        
    }
    .dialog-footer{
          display: block;
          padding-bottom: 30px;
          .el-button{
              width: 160px;
              height: 60px;
              font-size: 26px;
              border-color: #FF6A00;
              color: #FF6A00;
              border-radius: 10px;
          }
          .el-button:hover{
              background-color: #FF6A00;
              color: #fff;
          }
          .el-button+.el-button{
              margin-left: 30px;
          }
      }
  .dialog-footer-close {
    margin-top: 55px;
    display: flex;
    justify-content: center;
    .submit {
      background: #FF6A00 ;
      color: #fff;
    }
  }
  ::v-deep .el-dialog {
    border-radius:16px ;
  }

  .diglog-ontainer-open {
    ::v-deep {
        .el-dialog__header {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
        }

        .el-dialog {
            width: 450px;
            height: 250px;
            background: #FFFFFF;
            border-radius: 16px;
        }
    }

    .content-box {
        text-align: center;
        margin-top: 10px;
        padding: 0 35px;
        font-family: Microsoft YaHei;
        font-size: 18px;
        color: #212121;
    }

    .footer-box {
        margin-top: 40px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }
}
.close-status {
  width: 250px;
            padding: 0 20px;
            height: 65px;
            line-height: 65px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }
        .close-status:hover{
          background: #FFE566;
          color: #212121;
         }
</style>
  

